<template>
<div class="mobileOrEmail">
    <el-card style="width: 200px; float: left; margin-right: 20px;">
        <div style="padding: 14px;">
            <span v-if="isMobile">{{mobile_prefix}}-{{mobile}}</span>
            <span v-if="!isMobile">{{desc}}</span>
            <div class="bottom clearfix">
                <el-button type="text" v-if="isMobile"  class="button">已绑定</el-button>
                <el-button type="text" v-if="!isMobile" @click="toBindMobile"  class="button">去绑定</el-button>
            </div>
        </div>
    </el-card>
    <el-card style="width: 400px; float: left;">
        <div style="padding: 14px;">
            <span v-if="isEmail">{{email}}</span>
            <span v-if="!isEmail">{{desc}}</span>
            <div class="bottom clearfix">
                <el-button type="text" v-if="isEmail"  class="button">已绑定</el-button>
                <el-button type="text" v-if="!isEmail" @click="toBindEmail"  class="button">去绑定</el-button>
            </div>
        </div>
    </el-card>
    <el-dialog
            title="绑定邮箱"
            :visible.sync="bindEmailVisible"
            width="30%"
            center>
        <el-form :model="ruleFormEmail" status-icon :rules="emailRules" ref="ruleFormEmail" label-width="100px">
            <el-form-item label-width="0px"  prop="email">
                <el-input  v-model="ruleFormEmail.email" :placeholder="$t('input_mail')"></el-input>
            </el-form-item>
            <el-form-item label-width="0px"  prop="email_code">
                <el-input style="width: 164px"  v-model="ruleFormEmail.email_code" autocomplete="off" :placeholder="$t('input_email_code')"></el-input>
                <SMSCode :disabled="false"   ref="sms_mail" :codeValue="ruleFormEmail.email"  type="2" prefix=""></SMSCode>
            </el-form-item>
            <el-form-item label-width="0px" style="text-align: center">
                <el-button type="primary" @click="submitEmailForm('ruleFormEmail')">{{$t('btn_submit')}}</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>
    <el-dialog
            title="绑定手机"
            :visible.sync="bindMobileVisible"
            width="30%"
            center>
        <el-form :model="ruleFormMobile" status-icon :rules="mobileRules" ref="ruleFormMobile" label-width="100px">
            <el-form-item label-width="0px"  prop="phone">
                <el-select style="width: 100px" @change="changeEvent" v-model="mobilePrefix" :placeholder="$t('mobile_prefix')">
                    <el-option
                            v-for="item in areaCode"
                            :key="item.id"
                            :value="item.mobile_prefix"
                            :label="item.mobile_prefix">
                        <span style="float: left">{{ item.country }}</span>
                        <span style="float: right; color: #8492a6; font-size: 13px;padding-left: 10px;">{{ item.mobile_prefix }}</span>
                    </el-option>
                </el-select>
                <el-input style="width: 190px"  v-model.number="ruleFormMobile.phone" :placeholder="$t('input_phone')"></el-input>
            </el-form-item>
            <el-form-item label-width="0px"  prop="phone_code">
                <el-input style="width: 164px" v-model="ruleFormMobile.phone_code" autocomplete="off" :placeholder="$t('input_phone_code')"></el-input>
                <SMSCode :disabled="false" ref="sms_mobile" :codeValue="ruleFormMobile.phone"  type="1" :prefix="mobilePrefix"></SMSCode>
            </el-form-item>
            <el-form-item label-width="0px" style="text-align: center">
                <el-button type="primary" @click="submitMobileForm('ruleFormMobile')">{{$t('btn_submit')}}</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>

</div>
</template>

<script>
    import SMSCode from '@/components/SMSVcode.vue'
    export default {
        name: "mobileOrEmail",
        components: {
            'SMSCode':SMSCode
        },
        data(){
            var codes = /^\d{6}$/;
            var phone = (rule, value, callback) => {
                //let _self=this;
                if(!/^\d{2,}$/.test(value)){
                    callback(new Error('手机号非法'));
                    return;
                }
                if (value === '') {
                    callback(new Error('请输入手机号码'));
                }  else {
                    callback();
                }
            };
            var email = (rule, value, callback) => {
                //let _self=this;
                if(! this.tool_is_email(value)){
                    callback(new Error('邮箱格式非法'));
                    return;
                }
                if (value === '') {
                    callback(new Error('请输入邮箱号'));
                }  else {
                    callback();
                }
            };
            var code = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入短信验证码'));
                } else if (!codes.test(value)) {
                    callback(new Error('验证码输入有误'));
                } else {
                    callback();
                }
            };
            return {
                disabled:false,
                email:'',
                isEmail:Boolean,
                mobile:'',
                isMobile:Boolean,
                desc:'',
                mobile_prefix:'86',
                bindEmailVisible:false,
                bindMobileVisible:false,
                mobilePrefix:'86',
                ruleFormMobile: {
                    phone: '',
                    phone_code: '',
                },
                mobileRules: {
                    phone:[
                        { validator: phone, trigger: 'blur' }
                    ],
                    phone_code:[
                        { validator: code, trigger: 'blur' }
                    ]
                },
                ruleFormEmail:{
                    email:'',
                    email_code:'',
                },
                emailRules:{
                    email:[
                        { validator: email, trigger: 'blur' }
                    ],
                    email_code:[
                        { validator: code, trigger: 'blur' }
                    ]
                },
                mobilePrefixData: {cn_name: "中国",country: "China",en_name: "China",mobile_prefix: "86",status: 1,idn: "CN"},
                areaCode:[],
                codeValue:'',
                send_type:1,//
            };
        },
        mounted(){
            this.disabled=false;
            this.updataUserInfo();
            //
            this.getMobilePr();
        },
        methods:{
            toBindEmail(){
                this.bindEmailVisible=true;
            },
            toBindMobile(){
                this.bindMobileVisible=true;
            },
            getMobilePr(){
                let _self=this;
                this.axios.get(this.MOBILE_PREFIX)
                    .then(function (res) {
                        if(res.data.status=="success"){
                            _self.areaCode=res.data.data;
                            return;
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            changeEvent(val){
                let obj = {};
                obj = this.areaCode.find((item)=>{
                    return item.mobile_prefix === val;//筛选出匹配数据
                });
                if(obj!="" && obj!=undefined){
                    this.mobilePrefix=obj.mobile_prefix;
                    this.mobilePrefixData=obj;
                }
            },
            submitEmailForm(from){
                this.$refs[from].validate((valid) => {
                    if(valid){
                        this.axios
                            .post(this.BIND_EMAIL, {
                                    email: this.ruleFormEmail.email,
                                    code: this.ruleFormEmail.email_code,
                                })
                            .then(res => {
                                this.bindEmailVisible=false;
                                 if (res.data.status == "success") {
                                     this.updateMobileOrEmail(false,this.ruleFormEmail.email);
                                     this.updataUserInfo();
                                } else {
                                    this.$message({message: res.data.msg});
                                }
                            })
                            .catch(res => {
                                this.bindEmailVisible=false;
                                this.$message({message: "执行错误"});
                            });
                    }
                });
            },
            submitMobileForm(from){
                this.$refs[from].validate((valid) => {
                    if(valid){
                        this.axios
                            .post(this.BIND_MOBILE, {
                                    mobile_prefix: this.mobilePrefix,
                                    code: this.ruleFormMobile.phone_code,
                                    mobile: this.ruleFormMobile.phone
                                })
                            .then(res => {
                                // console.log(res.data.msg);
                                if (res.data.status == "success") {
                                    this.updateMobileOrEmail(true,this.ruleFormMobile.phone,this.mobilePrefix);
                                    this.updataUserInfo();
                                } else {
                                    this.$message({message: res.data.msg});
                                }
                            })
                            .catch(res => {
                                console.log(res.data);
                                this.$message({message: "执行错误"});
                            });
                    }
                });
            },
            updataUserInfo(){
                let userInfo=this.getUserInfo();
                this.email=userInfo.email;
                if(this.tool_is_null(userInfo.email)){
                    this.isEmail=false;
                }else {
                    this.isEmail=true;
                }
                this.mobile=userInfo.mobile;
                if(this.tool_is_null(userInfo.mobile)){
                    this.isMobile=false;
                }else {
                    this.isMobile=true;
                }
                this.desc=userInfo.desc;
                this.mobile_prefix=userInfo.mobile_prefix;
            }
        }
    }
</script>

<style scoped>

</style>
